<template>
  <view class="gateway">
    <view class="section-title">
      <view class="title">网关参数</view>
      <view class="operate-box">
        <view class="operate-item">
          <text class="iconfont icon-editor"></text>编辑
        </view>
      </view>
    </view>
    <view class="section-content">
      <view class="line">
        <view class="content">
          <text class="label">安装位置：</text>
          <text>{{name}}</text>
        </view>
      </view>
      <view class="line">
        <view class="content">
          <text class="label">Mac地址：</text>
          <text>{{macAddr}}</text>
        </view>
      </view>
      <view class="line">
        <view class="content">
          <text class="label">软件版本：</text>
          <text>{{softwareVersion}}</text>
        </view>
      </view>
      <view class="line">
        <view class="content">
          <text class="label">灯具版本：</text>
          <text>{{lampVersion}}</text>
        </view>
      </view>
      <view class="line">
        <view class="content">
          <text class="label">硬件版本：</text>
          <text>{{hardwareVersion}}</text>
        </view>
      </view>
      <view class="line">
        <view class="content">
          <text class="label">工作状态：</text>
          <text>{{stateText}}</text>
        </view>
      </view>
      <view class="line">
        <view class="content">
          <text class="label">数据上传：</text>
          <text>{{uploadDuration}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    projectInfo: {
      type: Object
    }
  },
  data() {
    return {
      name: '',
      macAddr: '',
      softwareVersion: '',
      lampVersion: '',
      hardwareVersion:'',
      state: '',
      stateText: '',
      uploadDuration: ''
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  watch: {
    projectInfo() {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const self = this
      if (self.projectInfo && Array.isArray(self.gateway) && self.gateway.length) {
        const [gatewayInfo] = self.gateway
        const { name } = gatewayInfo
        self.name = name || ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.gateway {
  padding: 30rpx;
  border-radius: 10rpx;
  background-color: $white;
}
.section-title {
  @include section-title;
  .operate-item {
    font-size: $font-size-1;
    color: $info;
    .iconfont {
      margin-right: 10rpx;
    }
  }
}
.section-content {
  .line {
    margin-top: 24rpx;
    font-size: $font-size-3;
    .label {
      color: $text-secondary;
    }
  }
}
</style>
